@import "variables";

seed-child-detail{
  .wrap{
    padding-bottom: pxTorem(160);
  }
  .eng{
    margin-top: pxTorem(8);
    @include font-size(f4);
    color: color(c4);
    &.small{
      @include font-size(f6);
    }
  }
  .child-detail-title{
    box-sizing: border-box;
    margin:  pxTorem(30) 0 pxTorem(24) pxTorem(24);
    vertical-align: top;
    line-height: 1;
    @include font-size(f5);
    color: color(c4)
  }
  .seed-underline:before{
    z-index: 1;
  }
  .seed-item-select-wrap, .seed-form-input-wrap{
    position: relative;
    .seed-select-title{
      max-width: 45%;
      margin-right: pxTorem(20);
      span{
        @include font-size(f2);
      }
    }
    .seed-item-select{
      position: relative;
      padding: pxTorem(30px) 0 pxTorem(26) pxTorem(24px);
      display: flex;
      justify-content: space-between;
      line-height: initial;
      background-color: #fff;
      &.has-change{
        .select-placeholder{
          opacity: 0;
        }
        select{
          opacity: 1;
        }
      }
      select{
        white-space: pre-wrap;
        width: 55%;
        background-color: #fff;
        direction: rtl;
        border: none;
        -webkit-appearance:none;
        appearance:none;
        margin-right: pxTorem(60px);
        color: color($h5,c4);
        &.has-change{
          color: color($h5,c4);
        }
      }
      .arrow{
        position: absolute;
        right: pxTorem(14px);
        top: 0;
        height: 100%;
        .choose{
          display: inline-block;
          width: pxTorem(20px);
          height: pxTorem(30px);
          background: url('#{$icons-path}/arrow.png') no-repeat;
          background-size: contain;
          transform: rotate(-90deg);
          -webkit-transform: rotate(-90deg);
        }
      }
    }
    .seed-item-select-date.seed-item-select{

      .data-value{
        color:color($h5,c4);
        margin-right: pxTorem(60px);
      }
    }
    #form-date-select{
      opacity: 0 ;
      position: absolute;
      right: 0;
      height:100%;
      bottom:0;
    }
    .error-tip {
      text-align: right;
      color: color($h5, c11);
      background-color: #fff;
      font-size: standard($f, F6);
      padding: 0 pxTorem(26) pxTorem(26) 0;
    }
  }
  .seed-form-input-wrap {
    position: relative;
    padding: pxTorem(30px) 0 pxTorem(26) pxTorem(24px);
    display: flex;
    justify-content: space-between;
    line-height: initial;
    background-color: #fff;
    .seed-form-input {
      margin-right: pxTorem(24px);
      font-size: standard($f, F4);
      color: color($h5, c4);
      vertical-align: top;
      text-align: right;
      overflow-x: visible;
      overflow-y: visible;
      &::-webkit-input-placeholder {
        color: color($h5, c4);
      }
    }
    .seed-form-input-title {
      max-width: 45%;
      margin-right: pxTorem(20);
      font-size: standard($f, F2);
      color: color($h5, c2);
      vertical-align: top;
    }
  }
  .item{
    padding: 0 pxTorem(24);
    box-sizing: border-box;
    background-color: #fff;
    min-height: pxTorem(130);
    &.header-pic{
      height: pxTorem(164);
      line-height: pxTorem(164);
      .item-title{
        line-height: 1;
      }
      .pic{
        position: relative;
        img{
          height: pxTorem(110);
          width: pxTorem(110);
          border-radius: 50%;
          margin-right: pxTorem(20);
        }
        input{
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto 0;
          opacity: 0;
          width: pxTorem(110);
          height: pxTorem(110);
        }
      }
    }
  }
  .item-title{
    @include font-size(f2);
    color: color(c2);
  }
  .item-value{
    @include font-size(f4);
    color: color(c4);
  }
  .multi{
    line-height: 1.3;
    padding: pxTorem(30) pxTorem(24) pxTorem(34);
    background-color: #fff;
    .item-value{
      max-width: 70%;
    }
  }
  .item-arrow{
    @include icon(17, 9, '#{$icons-path}/down_arrow.png');
  }
  seed-form-input{
    input{
      max-width: 70%;
    }
  }
  seed-submit-button{
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;
  }
}
